<template>
    <div class="body-style">
        <h1>&#9728; 为你推荐 &#9728;</h1>
        <h2>您当前点击的是 : {{ clickName }}</h2>
        <div v-for="item in list" :key="item.id" class="box-flex">
            <son :listdata="item" @getson="changeName"></son>
        </div>
        <footers></footers>
    </div>
</template>
<script>
import son from './bot-son.vue';
import footers from './bot-footer.vue';
export default {
    data() {
        return {
            clickName: null,
            list: [
                {
                    id: 1,
                    name: 'A',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: '小米11 Ultra,开启影像新时代',
                    price: 123
                },
                {
                    id: 2,
                    name: 'B',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: '智能定时|用电统计|过载保护',
                    price: 456
                },
                {
                    id: 3,
                    name: 'C',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: '小身材也有大智慧',
                    price: 789
                },
                {
                    id: 4,
                    name: 'D',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: 'RedMi Note 9 4G 6000MA',
                    price: 123
                },
                {
                    id: 5,
                    name: 'E',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: '青年‘无须’新选择',
                    price: 456
                },
                {
                    id: 6,
                    name: 'F',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: '5号彩虹电池(10粒),无汞无锡',
                    price: 778
                },
                {
                    id: 7,
                    name: 'G',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: '小米插线板 5孔位过载保护',
                    price: 889
                },
                {
                    id: 8,
                    name: 'H',
                    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F7%2F541a52c70316a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656637855&t=5d8eb4307f4b7445ab9cdb1a9a5353a2',
                    text: 'xiaoMi-优选，你值得拥有',
                    price: 999
                }
            ]
        };
    },

    methods: {
        changeName(val) {
            this.clickName = val;
        }
    },
    components: {
        son,
        footers
    }
};
</script>
<style lang="scss" scoped>
h1 {
    color: orange;
}
h2 {
    width: 1000px;
    text-align: center;
    position: relative;
}
h2::after {
    content: '';
    position: absolute;
    width: 20%;
    height: 1px;
    top: 50%;
    background-color: #ededed;
    right: 4%;
}
h2:before {
    content: '';
    position: absolute;
    width: 20%;
    height: 1px;
    top: 50%;
    background-color: #ededed;
    left: 4%;
}
.body-style {
    width: 1000px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.box-flex {
    width: 45%;
    height: 1000px;
}
</style>
